<template>
  <div>
    <a-select style="width: 120px" @change="handelChange">
      <a-select-option
        v-for="(item, index) in languageList"
        :key="index"
        :value="item"
      >
        {{ item }}
      </a-select-option>
    </a-select>
    <div id="codeEditBox"></div>
  </div>
</template>

<script setup>
import * as monaco from "monaco-editor";
import { ref, toRaw, onMounted, onBeforeUnmount } from "vue";
// 定义编辑器引用
const editor = ref(null);
// const monacoEditor = ref(undefined);
let languageList = ref([
  "javascript",
  "typescript",
  "html",
  "css",
  "json",
  "java",
  "sql",
  "groovy",
  "shell",
  "python",
]);
// 初始化编辑器
const initEditor = () => {
  editor.value = monaco.editor.create(document.getElementById("codeEditBox"), {
    value: 'console.log("Hello, world!")', // 初始文本
    language: "javascript", // 语言支持
    theme: "vs-dark", // 主题
    selectOnLineNumbers: true, // 显示行号
    roundedSelection: false,
    readOnly: false, // 只读模式
    cursorStyle: "line", // 光标样式
    automaticLayout: true, // 自动布局
    glyphMargin: true, // 字形边距
    useTabStops: false,
    fontSize: 16, // 字体大小
    autoIndent: true, // 自动缩进
    quickSuggestionsDelay: 100, // 代码建议延迟
    minimap: {
      // 缩略图
      enabled: true,
    },
    scrollBeyondLastLine: false, // 取消代码后面一大段空白
    overviewRulerBorder: false, // 不要滚动条的边框
  });

  // 监听值变化
  editor.value.onDidChangeModelContent(() => {
    const code = getVal();
    console.log(code);
  });
};

// 在挂载钩子上运行initEditor
onMounted(() => {
  initEditor();
});

// 在卸载前钩子上释放编辑器
onBeforeUnmount(() => {
  editor.value.dispose();
});

// 获取编辑器的值
const getVal = () => {
  return toRaw(editor.value).getValue(); // 从编辑器中获取文本
};
//切换语言
const handelChange = (val) => {
  console.log(val);
  monaco.editor.setModelLanguage(toRaw(editor.value.getModel()), val);
  // toRaw(editor.value).setModel(
  //   monaco.editor.createModel(`{"name":'123'}`, "json")
  // );
  // monaco.editor.setModelLanguage(monacoEditor.value.getModel(), val);
};
</script>

<style scoped>
#codeEditBox {
  width: 100%;
  height: 500px;
}
</style>
